<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
  <link rel="stylesheet" href="css/bass.css">
  <link rel="stylesheet" href="css/swiper-3.4.2.min.css">
  <link rel="stylesheet" href="css/find.css">
</head>
<body>
  <div class="swiper-container mySwiper">
    <div class="swiper-wrapper">
      <div class="swiper-slide"><img src="img/Hydrangeas.jpg" alt=""></div>
      <div class="swiper-slide"><img src="img/Jellyfish.jpg" alt=""></div>
      <div class="swiper-slide"><img src="img/Lighthouse.jpg" alt=""></div>
      <div class="swiper-slide"><img src="img/Penguins.jpg" alt=""></div>
    </div>
  </div>
  <article class="">
    <div class="content">
      <h3>为你推荐</h3>
      <div class="fig_box">
        <figure>
          <img src="img/Jellyfish.jpg" alt="">
        </figure>
        <figcaption>这把椅子有个男孩的名字：宜家的家具名称都是什么意思？这把椅子有个男孩的名字：宜家的家具名称都是什么意思？</figcaption>
      </div>
      <div class="item">
        <div>
          <h3>一份"2017年家装流行报告"</h3>
          <p>这个比赛从用色技巧、房间布置技巧、空间利用等等方面作为考虑，透过大数据分析（例如图片被收藏次数、下载次数等等）最终评选出了12个不同类目的奖项。</p>
        </div>
        <img src="img/Penguins.jpg" alt="">
      </div>
      <div class="item">
        <div>
          <h3>未来的食物，长什么样子？</h3>
          <p>每天都在思考早饭、午饭、晚饭要吃什么这个终极难题。那么你有没有想过未来的食物会是什么样子的？每天都在思考早饭、午饭、晚饭要吃什么这个终极难题。那么你有没有想过未来的食物会是什么样子？</p>
        </div>
        <img src="img/Lighthouse.jpg" alt="">
      </div>
    </div>
    <div class="content borderTop">
      <h3>众美臻品</h3>
      <div class="fig_box">
        <figure>
          <img src="img/Jellyfish.jpg" alt="">
        </figure>
        <figcaption>美食摄影很难吗？他一个人就给出52种创意提案！美食摄影很难吗？他一个人就给出52种创意提案！</figcaption>
      </div>
      <div class="item">
        <div>
          <h3>未来的食物，长什么样子？</h3>
          <p>每天都在思考早饭、午饭、晚饭要吃什么这个终极难题。那么你有没有想过未来的食物会是什么样子的？每天都在思考早饭、午饭、晚饭要吃什么这个终极难题。那么你有没有想过未来的食物会是什么样子？</p>
        </div>
        <img src="img/Lighthouse.jpg" alt="">
      </div>
    </div>
  </article>
  <div class="noContent"><span>———　</span>没有更多内容了<span>　———</span></div>
</body>
<script src="js/jquery.min.js"></script>
<script src="js/swiper-3.4.2.jquery.min.js"></script>
<script>
  var mySwiper = new Swiper('.swiper-container',{
    loop: true,
    slidesPerView : 1.3,
    spaceBetween : 15,
    // spaceBetween : '5%',//按container的百分比
  })
</script>
</html>
